<template>
  <div>
    <!--顶部 搜索栏-->
    <div style="position: fixed; top: 0; height: 50px; width: 100%; z-index: 999">
      <div class="card">
        <el-input
          v-model="keyword"
          round
          placeholder="请输入标题关键字"
          clearable
          style="
            position: absolute;
            left: 125px;
            top: 15px;
            width: 900px;
            background-color: #f3f0f9;
          "
        />
        <el-button
          @click="loadNotices"
          round
          color="#0b9a2f"
          style="position: absolute; left: 1050px; top: 15px"
        >
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
      </div>
    </div>

    <div class="tabs">
      <el-card>
        <div v-for="(notice, index) in noticeList" style="margin-bottom: 15px">
          <el-card
            v-if="notice.head_image"
            @click="toNoticeDetail(notice)"
            style="cursor: pointer"
            hoverable
          >
            <div style="position: absolute; left: 240px; width: 690px">
              <text style="font-weight: bold; font-size: 20px">{{ notice.title }}</text>
              <p>{{ notice.content + '...' }}</p>
              <div style="position: absolute; margin-top: 10px">
                发布时间：{{ notice.created_date }}
              </div>
            </div>
          </el-card>
          <el-card v-else style="cursor: pointer" hoverable>
            <div style="height: 130px">
              <text @click="toNoticeDetail(notice)" style="font-weight: bold; font-size: 20px">{{
                notice.title
              }}</text>
              <span class="cutInfo" v-html="notice.content" @click="toNoticeDetail(notice)"> </span>
              <div style="position: absolute; margin-top: 1%">
                发布时间：{{ notice.created_date }}
              </div>
            </div>
          </el-card>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { getNotice } from '@/lafSdkCollection/getPBInfo'
  import watermark from '@/utils/watermark.js'
  import { useUserStore } from '@/store/modules/user'
  import { ElMessage } from 'element-plus'
  const router = useRouter()
  const keyword = ref('')
  const noticeList = ref([])
  const noticeListCopy = ref([])
  const toNoticeDetail = (notice) => {
    router.push({
      path: '/noticeDetail',
      query: {
        id: notice._id,
      },
    })
  }
  const loadNotices = async () => {
    if (keyword.value.length == 0) {
      noticeList.value = noticeListCopy.value
      ElMessage('请先输入标题关键字')
    } else {
      noticeList.value = noticeListCopy.value
      noticeList.value = noticeList.value.filter((item) => item.title.match(keyword.value))
    }
  }
  //时间戳转字符串
  const Activity = async () => {
    const { res, count } = await getNotice()
    for (let i = 0; i < count.total; i++) {
      let baseTime = res.data[i].create_date
      let d = new Date(baseTime)
      let batchDate = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'
      noticeList.value.push({
        _id: res.data[i]._id,
        title: res.data[i].title,
        content: res.data[i].content,
        created_date: batchDate,
      })
    }
    noticeListCopy.value = noticeList.value
  }
  const userStore = useUserStore()
  onMounted(() => {
    Activity()
    setWaterMark()
  })
  const setWaterMark = () => {
    //添加水印
    watermark.set(userStore.name, userStore.num)
    //移除水印,传 null 移除水印
    //watermark.close()
  }
  onUnmounted(async () => {
    watermark.close(null)
  })
</script>

<style lang="scss" scoped>
  .cutInfo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }
  .card {
    position: relative;
    top: 90px;
    left: 0;
    right: 0;
    margin: auto;
    height: 60px;
    background: white;
    box-shadow: 0px 1px 3px #d3d4d8;
    border-radius: 5px;
  }
  .tabs {
    position: relative;
    top: 70px;
    left: 0;
    right: 0;
    margin: auto;
    width: 1000px;
    height: auto;
    background: white;
    box-shadow: 0px 1px 3px #d3d4d8;
    border-radius: 5px;
  }
</style>
